<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <title>Upper</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>

<script src="js/jquery-2.0.3.min.js"></script>
<script src="dwr/engine.js"></script>
<script src="dwr/util.js"></script>
<script src="dwr/interface/controller.js"></script>
<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">

var timer;

function checkStatus() {
	
	controller.checkTestStatus({callback:function(status){
		var lastIndex = parseInt($("#currentIndex").val());
		var lastInstanceIndex = parseInt($("#currentInstanceIndex").val());
		var currentInstanceIndex = -1;
		if(status.currentTestInstance != null) {
			currentInstanceIndex = status.currentTestInstance.currentStatus.currentStep.index;
		}
		
		//alert("Test Step: " + status.currentStep.index);
		//alert("Last Instance Index: " + lastInstanceIndex);
		//alert("Test Instnace Step: " + currentInstanceIndex);
		
		if(lastIndex < status.currentStep.index) {
			updateStep(status.currentStep, status);
		} else if (lastInstanceIndex < currentInstanceIndex) {
			updateInstanceStep(status, status.currentStep, status.currentTestInstance.currentStatus.currentStep);
		} else if (status.currentStep.index == 2 && lastInstanceIndex > currentInstanceIndex) {
			clearOtherTables();
			updateInstanceStep(status, status.currentStep, status.currentTestInstance.currentStatus.currentStep);
		}
		
		if(status.currentTestInstance.currentStatus.log != null && status.currentTestInstance.currentStatus.log != '') {
			showLog(status.currentTestInstance.currentStatus.log);
		}	

		if(status.currentStep.index == 3) {
			controller.getBestInstance({callback:function(instance){
				if(instance != null) {
					var tableInstanceId = '#instanceResult' + instance.id;
					$("#bestInstance tr td").html("Instancia recomendada: " + instance.name);
					$("#bestInstance").show();
					//adicionar instance remoendada
					//verifiar problema com a ausencia de result
				}
			}});
			checkAll();
			clearInterval(timer);
		}
	}});
	
}

function checkAll() {
	$("#mainInstanceSteps-step1-loading").html("OK");
	$("#mainInstanceSteps-step2-loading").html("OK");
	$("#mainInstanceSteps-step3-loading").html("OK");
	$("#mainInstanceSteps-step4-loading").html("OK");
	$("#mainInstanceSteps-step5").html("Finalizado");
	
	$("#otherInstanceSteps-step1-loading").html("OK");
	$("#otherInstanceSteps-step2-loading").html("OK");
	$("#otherInstanceSteps-step3-loading").html("OK");
	$("#otherInstanceSteps-step4-loading").html("OK");
	$("#otherInstanceSteps-step5").html("Finalizado");
}

function clearOtherTables() {
	$("#otherInstanceSteps-step1-loading").html('<image src="image/ajax-loader.gif" />');
	$("#otherInstanceSteps-step2").html("");
	$("#otherInstanceSteps-step2-loading").html("");
	$("#otherInstanceSteps-step3").html("");
	$("#otherInstanceSteps-step3-loading").html("");
	$("#otherInstanceSteps-step4").html("");
	$("#otherInstanceSteps-step4-loading").html("");
	$("#otherInstanceSteps-step5").html("");
	$("#otherInstanceSteps-step5-loading").html("");
}

function showLog(log) {
	$("#tdLog").append(log);
	$("#divLog").scrollTop(document.getElementById('divLog').scrollHeight);
}

function updateStep(step, status) {
	
	$("#currentIndex").val(step.index);
	$("#currentInstanceIndex").val(1);
	
	if(step.index == 2) {
		$("#otherInstanceSteps").show();
	} 
}

function updateInstanceStep(status, step, instanceStep) {
	
	var tblName = "#mainInstanceSteps";
	if(step.index == 2) {
		tblName = "#otherInstanceSteps";
	}  
	
	if(instanceStep.index == 2) {
		if(status.currentStep.index == 1) {				
			$("#mainInstanceSteps-titulo").append(" - " + status.currentTestInstance.instanceType.name);
		} else if(status.currentStep.index == 2) {
			$("#otherInstanceSteps-titulo").html("Instância alternativa - " + status.currentTestInstance.instanceType.name);
		}				
	}
	
	$("#currentInstanceIndex").val(instanceStep.index);
	var idAtual = tblName + '-step' + instanceStep.index;
	var idAtualLoading = idAtual + '-loading';
	
	if(instanceStep.index != 0) {
		var indiceAnterior = instanceStep.index - 1;
		var idAnteriorLoading = tblName + '-step' + indiceAnterior + '-loading';
		$(idAnteriorLoading).html("OK");		
	}
	
	if(status.currentTestInstance.currentStatus.result != null) {
		showResult(status.currentTestInstance.currentStatus.result);
	} 
	
	$(idAtual).html(instanceStep.description);
	if(instanceStep.index != 5) {
		$(idAtualLoading).html("<image src='image/ajax-loader.gif' />");	
	}	
}

function showResult(result) {
	var newResult = $("#modeloResult").html()
		.replace("[instanceId]",result.instanceType.id)
		.replace("[InstanceTypeName]",result.instanceType.name)
		.replace("[TransactionNameValue]",result.transactionName)
		.replace("[TransactionExcTimeValue]",result.transactionExecTime)
		.replace("[TransactionMaxExcTimeValue]",result.transactionMaxExecTime)
		.replace("[MaxThreadsValue]",result.maxThreads)
		.replace("[CpuMetricValue]",result.cpuMetric)
		.replace("[MemoryMetricValue]",result.memoryMetric)
		.replace("[DiskMetricValue]",result.diskMetric);
	$("#tdResults").append(newResult);
}

//timer = setInterval('checkStatus()',5000);
timer = setInterval('checkStatus()',1000);

</script>

<body>

<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <a class="brand" href="<s:url action='index' />">Upper</a>
    <ul class="nav">
      <li class="active"><a href="<s:url action='index' />">Configuração</a></li>
      <li><a href="#">Teste</a></li>
    </ul>
  </div>
</div>

<h3>Teste<h3>


<s:hidden id="currentIndex" value="1" />
<s:hidden id="currentInstanceIndex" value="1" />

<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr valign="top">
		<td width="20%">
			<table border="0" cellpadding="0" cellspacing="0" id="mainInstanceSteps"  class="table table-bordered">
				<thead>
					<th id="mainInstanceSteps-titulo">
						Instância principal
					</th>
					<th>
					</th>
				</thead>
				<tbody>
				<tr valign="top">
					<td id="mainInstanceSteps-step1" width="80%">
						Inicializando instância
					</td>
					<td id="mainInstanceSteps-step1-loading" width="20%">
						<image src="image/ajax-loader.gif" />
					</td>
				</tr>
				<tr>
					<td id="mainInstanceSteps-step2">
						
					</td>
					<td id="mainInstanceSteps-step2-loading">
						
					</td>
				</tr>
				<tr>
					<td id="mainInstanceSteps-step3">

					</td>
					<td id="mainInstanceSteps-step3-loading">

					</td>	
				</tr>
				<tr>
					<td id="mainInstanceSteps-step4">

					</td>
					<td id="mainInstanceSteps-step4-loading">

					</td>
				</tr>
				<tr>					
					<td id="mainInstanceSteps-step5">

					</td>
					<td id="mainInstanceSteps-step5-loading">

					</td>																			
				</tr>
				</tbody>
			</table>
			<table border="0" cellpadding="0" cellspacing="0" id="otherInstanceSteps" class="table table-bordered" style="display: none;">
				<thead>
					<th id="otherInstanceSteps-titulo">
						Instância alternativa
					</th>
					<th>
					</th>
				</thead>
				<tbody>
				<tr valign="top">
					<td id="otherInstanceSteps-step1" width="80%">
						Inicializando instância
					</td>
					<td id="otherInstanceSteps-step1-loading" width="20%">
						<image src="image/ajax-loader.gif" />
					</td>
				</tr>
				<tr>
					<td id="otherInstanceSteps-step2">
						
					</td>
					<td id="otherInstanceSteps-step2-loading">
						
					</td>
				</tr>
				<tr>
					<td id="otherInstanceSteps-step3">

					</td>
					<td id="otherInstanceSteps-step3-loading">

					</td>	
				</tr>
				<tr>
					<td id="otherInstanceSteps-step4">

					</td>
					<td id="otherInstanceSteps-step4-loading">

					</td>
				</tr>
				<tr>					
					<td id="otherInstanceSteps-step5">

					</td>
					<td id="otherInstanceSteps-step5-loading">

					</td>																			
				</tr>
				</tbody>
			</table>						
		</td>	
		<td width="60%">
			<div id="divLog" style="max-height: 200px;overflow: auto">

				<table border="0" cellpadding="0" cellspacing="0">
					<tr valign="top">
						<td id="tdLog">
	
						</td>
					</tr>
				</table>
								
			</div>
		</td>	
		<td width="20%" id="tdResults">
			<table id="bestInstance" class="table table-bordered" style="display: none">
				<tr class="success">
					<td>
					</td>
				</tr>
			</table>
			
		</td>			
	</tr> 
</table>

<div id="modeloResult" style="display: none;" >
<table id="instanceResult[instanceId]" border="0" cellpadding="0" cellspacing="0" class="table table-bordered">
	<tr valign="top">
		<td>
			Tipo de instância:
		</td>
		<td>
			[InstanceTypeName]
		</td>						
	</tr>
	<tr valign="top">
		<td>
			Nome da transação:
		</td>
		<td>
			[TransactionNameValue]
		</td>						
	</tr>
	<tr valign="top">
		<td>
			Tempo de execução:	
		</td>
		<td>
			[TransactionExcTimeValue]
		</td>						
	</tr>	
	<tr valign="top">
		<td>
			Métrica transação:
		</td>
		<td>
			[TransactionMaxExcTimeValue]
		</td>						
	</tr>		
	<tr valign="top">
		<td>
			Máximo de Threads:
		</td>
		<td>
			[MaxThreadsValue]
		</td>						
	</tr>			
	<tr valign="top">
		<td>
			Metrica CPU:
		</td>
		<td>
			[CpuMetricValue]
		</td>						
	</tr>		
	<tr valign="top">
		<td>
			Metrica de memoria:
		</td>
		<td>
			[MemoryMetricValue]
		</td>						
	</tr>		
	
	<tr valign="top">
		<td>
			Metrica de disco:
		</td>
		<td>
			[DiskMetricValue]
		</td>						
	</tr>																												
</table>
</div>

</body>
</html>
